<template>
  <div class="newsInfo-container">
      <!-- 标题 -->
      <h4>{{infoList.title}}</h4>
      <!-- 小标题 -->
       <p>
           <span>发表时间: {{infoList.add_time | dataFormat}}</span>
           <span>点击: {{this.infoList.click}} 次</span>
       </p>
      <!-- 内容区域 -->
       <div class="content" v-html="infoList.content">
           
       </div>
      <!-- 评论子组件区域 -->
       <comment-box :id = 'id'></comment-box>

  </div>
</template>
<script>
// 评论组件引入
import Comment from '../subcomponents/Comment.vue';
// 引入提示
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
           id: this.$route.params.id,
           infoList:{},
        }
    },
    created(){
       this.getInfoList();
    },
    methods: {
       getInfoList(){
         this.$http.get('api/getnew/'+this.id).then(result => {
            //  console.log(result.body.message)是一个数组
            //   console.log(result.body)
             if(result.body.status === 0){
                 this.infoList =result.body.message[0];
              
             } else {
               Toast('网络较差,获取信息失败请刷新~~~');
             }
         });
       }
    },
    components:{
        'comment-box': Comment,
    }
}
</script>
<style lang="scss" scoped>
  .newsInfo-container {
      padding: 0 5px 50px;
      img {
          width: 100%;
      }
      h4 {
          text-align: center;
          color: red;
      }
      p {
          color: skyblue;
          padding: 0 10px;
         display: flex;
         justify-content: space-between;
      }
  }
</style>
